import React from 'react';
import {connect} from 'dva';
import {Link, browserHistory} from 'dva/router';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button, Switch, Modal, Popconfirm, Tabs, message} from 'antd';
import moment from 'moment'
import ForexDetail from '../../../components/forex/ForexDetail';
import OperatorConstant from "../../../utils/OperatorConstant";
import RightBox from "../../../components/commons/RightBox";
import RightContacts from "../../../utils/RightConstants";
const R = require('ramda');
const dateFormat = 'YYYY-MM-DD';
const { RangePicker } = DatePicker;
const FormItem = Form.Item;
const Option = Select.Option;
const RadioGroup = Radio.Group;

export default connect(({foreignExchangeManage, claim, lesseeAccount}) => ({foreignExchangeManage, claim, lesseeAccount}))(
    Form.create()(class foreignExchangeManage extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
            }
        }

        componentDidMount() {
            this.props.dispatch({
                type: 'foreignExchangeManage/getForexList',
                payload: {
                    status: "1",
                }
            });
        }

        handleEdit = (record, type) => {
            if(type != OperatorConstant.add){
                this.props.dispatch({type: 'foreignExchangeManage/getForexById', payload: {id: record.id}});
            }

            if(type == OperatorConstant.approval){
                //this.props.dispatch({type: 'claim/getClaimForexList', payload: {forexId: record.id}});

            }else if(type == OperatorConstant.add){
                this.props.dispatch({type: 'lesseeAccount/getAccount', payload: {}});
                this.props.dispatch({type:'foreignExchangeManage/queryPaymen',payload:{}});
            }
            this.forexDetail.handleOpen(type);
        }



        handleSearch = () => {
            let values = this.props.form.getFieldsValue();
            let newPage = this.props.foreignExchangeManage.page;
            newPage.page = 1;

            let beginTime = "";
            let endTime = "";

            if (values.rectime != null && values.rectime != undefined) {
                if(values.rectime.length >=2 ){
                    if(values.rectime[0] != ''){
                        beginTime = values.rectime[0].format(dateFormat);
                    }
                    if(values.rectime[1] != ''){
                        endTime = values.rectime[1].format(dateFormat);
                    }

                }

            }


            this.props.dispatch({
                type: 'foreignExchangeManage/getForexList',
                payload: {
                    payman: values.payman,
                    beginAmt: values.beginAmt,
                    endAmt: values.endAmt,
                    beginTime: beginTime,
                    endTime: endTime,
                    contractno: values.contractno,
                    payaccount: values.payaccount,
                    status: values.status,
                    page: newPage
                }
            });
        };



        columns = [
            {title: '收汇时间', dataIndex: 'rectime', key: 'rectime'},

            {title: '收汇金额', dataIndex: 'recamount', key: 'recamount'},

            {title: '收汇币种', dataIndex: 'recamountunit', key: 'recamountunit',},

            {title: '付汇人', dataIndex: 'payman', key: 'payman'},

            {title: '付汇账号', dataIndex: 'payaccount', key: 'payaccount'},

            {title: '状态', render(record) {
                if(record.status == '0') {
                    return '删除';
                } else if(record.status === '1') {
                    return '待结汇';
                }else if(record.status == '3') {
                    return '待复核';
                }else if(record.status == '4') {
                    return '已确认';
                }else if(record.status == '5') {
                    return '复核不通过';
                }
            }},

            {title: '操作', width: '150px', fixed: 'right', key: 'key_oprator',

                render: (text, record, index) => {
                    let deleteButton =
                        <RightBox resource={RightContacts.FOREIGN.FOREIGN_EX_DELETE}>
                            <Popconfirm placement="leftTop" title={'数据删除后将不可以恢复，是否继续删除？'} onConfirm={() => {
                                this.props.dispatch({
                                    type: 'foreignExchangeManage/deleteForexById',
                                    payload: {
                                        id : record.id,
                                        onSuccess:()=>{
                                            this.handleSearch();
                                        }
                                    }
                                });
                            }} okText="是" cancelText="否">
                                <a href=" ">删除</a >
                            </Popconfirm></RightBox>;
                    deleteButton = record.status === "1" || record.status === "2" ? deleteButton : "";
                    let split = deleteButton === "" ? "" : <span className="ant-divider"/>;



                    if(this.props.foreignExchangeManage.status == ""){
                        return (
                            <span>
                        <a href="#" onClick={this.handleEdit.bind(this, record, OperatorConstant.view)}>查看</a>
                    </span>
                        );
                    }else{
                        return (
                            <span>
                    {record.status === "1" ?
                        <span><RightBox resource={RightContacts.FOREIGN.FOREIGN_EX_EXCHANGE}><a href="#" onClick={this.handleEdit.bind(this, record, OperatorConstant.exchange)}>结汇</a> <span
                            className="ant-divider"/></RightBox> </span> : ""}

                                {record.status === "3" ?
                                    <span><RightBox resource={RightContacts.FOREIGN.FOREIGN_EX_APPROVAL}><a href="#" onClick={this.handleEdit.bind(this, record, OperatorConstant.approval)}>审核</a> <span
                                        className="ant-divider"/></RightBox> </span> : ""}

                                <a href="#" onClick={this.handleEdit.bind(this, record, OperatorConstant.view)}>查看</a>
                                {split}
                                {deleteButton}
                </span>
                        );
                    }
                }
            }
        ];

        render () {
            let dataSouce = R.isNil(this.props.foreignExchangeManage.dataSource) ? {} : this.props.foreignExchangeManage.dataSource;
            let formItemLayout = {labelCol: {span: 6}, wrapperCol: {span: 18}};
            const { getFieldDecorator } = this.props.form;
            let values = this.props.form.getFieldsValue();

            let beginTime = "";
            let endTime = "";

            if (values.rectime != null && values.rectime != undefined) {
                if(values.rectime.length >=2 ){
                    if(values.rectime[0] != ''){
                        beginTime = values.rectime[0].format(dateFormat);
                    }
                    if(values.rectime[1] != ''){
                        endTime = values.rectime[1].format(dateFormat);
                    }

                }

            }



            let pagination = {
                showTotal: total => `共 ${total} 条数据`,
                pageSize: this.props.foreignExchangeManage.page.size,
                total: this.props.foreignExchangeManage.page.totalRow,
                showSizeChanger: true,
                current:this.props.foreignExchangeManage.page.page,
                onShowSizeChange: (current, size) => {
                    let newPage = this.props.foreignExchangeManage.page;
                    newPage.size = size;
                    newPage.page = 1;
                    this.props.dispatch({
                        type: 'foreignExchangeManage/getForexList',
                        payload: {
                            payman: values.payman,
                            beginAmt: values.beginAmt,
                            endAmt: values.endAmt,
                            beginTime: beginTime,
                            endTime:   endTime,
                            payaccount: values.payaccount,
                            status: values.status,
                            page: newPage
                        }
                    });
                },
                onChange: (pageNumber, pageSize) => {
                    let newPage = this.props.foreignExchangeManage.page;
                    newPage.page = pageNumber;
                    this.props.dispatch({
                        type: 'foreignExchangeManage/getForexList',
                        payload: {
                            payman: values.payman,
                            beginAmt: values.beginAmt,
                            endAmt: values.endAmt,
                            beginTime: beginTime,
                            endTime:   endTime,
                            payaccount: values.payaccount,
                            status: values.status,
                            page: newPage
                        }
                    });
                }
            }
            return (
                <div>

                    <Form >
                        <div style={{width: 1250}}>
                            <Row >
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label={'付汇人'}>
                                        {getFieldDecorator('payman', {})(
                                            <Input style={{width: 200}}/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={5}>
                                    <FormItem {...formItemLayout} label={'收汇金额'}>
                                        {getFieldDecorator('beginAmt', {})(
                                            <Input style={{width: 200}}/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={3}>
                                    <FormItem  {...formItemLayout} label={'至'}>
                                        {getFieldDecorator('endAmt', {})(
                                            <Input style={{width: 200}}/>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>
                            <Row >
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label={'付汇账号'}>
                                        {getFieldDecorator('payaccount', {})(
                                            <Input style={{width: 200}}/>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={9}>
                                    <FormItem  {...formItemLayout} label={'收汇时间'}>
                                        {getFieldDecorator('rectime', {})(
                                            <RangePicker
                                                showTime={{ format: 'YYYY-MM-DD' }}
                                                format="YYYY-MM-DD"
                                                placeholder={['开始时间', '结束时间']}
                                            />
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={6}>
                                    <FormItem {...formItemLayout} label={'合同协议号'}>
                                        {getFieldDecorator('contractno', {})(
                                            <Input style={{width: 200}}/>
                                        )}
                                    </FormItem>
                                </Col>
                            </Row>

                            <Row>
                                <Col span={7}>
                                    <FormItem
                                        {...formItemLayout}
                                        label={'状态'}
                                    >
                                        {getFieldDecorator('status', {
                                            initialValue: "1"
                                        })(
                                            <RadioGroup style={{width: 800}} >
                                                <Radio value="">全部</Radio>
                                                <Radio value="1">待结汇</Radio>
                                                <Radio value="3">待复核</Radio>
                                                <Radio value="5">复核失败</Radio>
                                            </RadioGroup>
                                        )}
                                    </FormItem>
                                </Col>
                                <Col span={12} style={{textAlign: 'center'}}>
                                    <Button type="primary" icon="search" style={{marginRight: 5}} onClick={this.handleSearch.bind(this)}>查询</Button>
                                    <RightBox resource={RightContacts.FOREIGN.FOREIGN_EX_ADD}><Button icon="plus" type="primary" onClick={this.handleEdit.bind(this, null, "add")}>新增外汇</Button></RightBox>
                                </Col>
                            </Row>
                        </div>
                    </Form>

                    <Table rowKey="id" dataSource={this.props.foreignExchangeManage.list} columns={this.columns} bordered={true}
                           size={'middle'} pagination={pagination}/>

                    <ForexDetail wrappedComponentRef={(inst) => this.forexDetail = inst} dispatch={this.props.dispatch}
                                 dataSource={this.props.foreignExchangeManage.dataSource} claim = {this.props.claim} handleSearch={this.handleSearch}
                                 accountList = {this.props.lesseeAccount.accountList}
                                 paymen={this.props.foreignExchangeManage.paymen}
                    />


                </div>
            )
        }
    })


)
